<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--数据列表主工作区-->
    <el-card style="padding-right: 20px;padding-left:20px;">
      <!--搜索框和添加按钮-->
      <el-row :id="'search-bar'" :gutter="20" style="margin-left:2px;margin-right: 2px; border:1px solid #eeeeee;padding: 30px;margin-bottom: 10px;border-radius: 3px;">
        <el-col :span="3">
          <el-select v-model="pageReqParams.status" placeholder="所有订单" clearable>
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="4">
          <el-input placeholder="请输入订单编号" v-model="pageReqParams.code" clearable>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-input placeholder="请输入收货人姓名" v-model="pageReqParams.shippingUser" clearable>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-input placeholder="请输入收货人电话" v-model="pageReqParams.shippingPhone" clearable>
          </el-input>
        </el-col>
        <el-col :span="5">
          <el-input placeholder="请输入收货人地址" v-model="pageReqParams.shippingAddress" clearable>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-row :gutter="0" >
          <el-col :span="10">
            <el-input v-model="pageReqParams.minMoney" placeholder="¥" clearable></el-input>
          </el-col>
          <el-col :span="2">
            <hr style="margin-top: 20px;margin-right:0px;padding-right: 0px;"/>
          </el-col>
          <el-col :span="10">
            <el-input v-model="pageReqParams.maxMoney" style="margin-left: 0px;" placeholder="¥" clearable></el-input>
          </el-col>
          </el-row>
        </el-col>

        <el-col :span="4">
          <el-button type="primary" @click="handleSearchButtonClick">搜索</el-button>
        </el-col>

      </el-row>
      <!--用户列表-->
      <el-table
        :data="pageInfo.list"
        border
        stripe
        style="width: 100%">


        <el-table-column
          label="订单编号"
          prop="code"></el-table-column>
        <el-table-column
          label="订单状态"
        >
        <template slot-scope="scope">
          {{OrderStatus[scope.row.status]}}
        </template>
        </el-table-column>
        <el-table-column
          label="订单金额"
        >
          <template slot-scope="scope">
            <span>¥{{(scope.row.orderMoney/100).toFixed(2)}}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="收货人"
          prop="shippingUser"></el-table-column>

        <el-table-column
          label="收货人电话"
          prop="shippingPhone"></el-table-column>

        <el-table-column
          label="收货地址">
          <template slot-scope="scope">
            <span>{{scope.row.province+scope.row.city+scope.row.district+scope.row.address}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="下单时间" prop="createTime">

        </el-table-column>


        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">


            <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete"
                         @click="handleDeleteButtonClick(scope.row.id)"></el-button>
            </el-tooltip>

            <el-button type="primary" @click="handleOrderDetail(scope.row.id)">订单详情</el-button>

            <el-button type="primary" v-if="scope.row.status==8">去审核</el-button>

          </template>
        </el-table-column>
      </el-table>
      <!--数据列表分页-->
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handleCurrentPageNumberChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="pageSizes"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>
    </el-card>
    <!--订单详情对话框-->
    <el-dialog title="订单详情"
               :center="true"
               :visible.sync="orderDetailsDialogVisible" width="50%">
      <el-card>
        <el-row>
          <div >
            <el-table :data="orderDetails.items"
                      style="font-size: 12px;background-color:#eeeeee;"

            >
              <el-table-column label="商品图片" width="100">
                <template slot-scope="itemScope">
                  <el-image :src="imageServer+'/'+itemScope.row.icon"></el-image>
                </template>
              </el-table-column>
              <el-table-column label="商品名称" prop="name">

              </el-table-column>
              <el-table-column label="商品单价" width="200">
                <template slot-scope="itemScope">
                  <span>¥{{(itemScope.row.price/100).toFixed(2)}}</span>
                </template>
              </el-table-column>
              <el-table-column label="购买数量" width="100" prop="count"></el-table-column>
            </el-table>
          </div>
        </el-row>
      </el-card>
    </el-dialog>


  </div>
</template>

<script>
  import { OrderStatus } from '../../config/variable'
  import {mapState} from 'vuex'
  export default {
    name: "OrderList",
    data() {
      return {

        OrderStatus: OrderStatus,

        statusList:[
          {
            value:0,
            label:'未支付订单'
          },
          {
            value:1,
            label:'已支付订单'
          },
          {
            value:2,
            label:'已打印订单'
          },
          {
            value:3,
            label:'正在出库订单'
          },
          {
            value:4,
            label:'正在扫描订单'
          },
          {
            value:5,
            label:'正在打包订单'
          },
          {
            value:6,
            label:'正在运送中订单'
          },
          {
            value:7,
            label:'已完成订单'
          },
          {
            value:8,
            label:'取消审核中订单'
          },
          {
            value:9,
            label:'已审核通过订单'
          },
          {
            value:10,
            label:'审核不通过订单'
          }
        ],

        orderDetails:{},


        // 分页请求时要携带的参数
        pageReqParams: {
          code:'',
          shippingUser:'',
          shippingPhone:'',
          shippingAddress:'',
          status:'',
          maxMoney:'',
          minMoney:'',
          pageNum: 1,
          pageSize: 30
        },
        // 分页信息
        pageInfo: {
          pageNum: 0,
          pageSize: 0,
          total: 0,
          totalPage: 0,
          list: []
        },
        // 分页的大小常量列表
        pageSizes: [30, 50, 100, 200],

        orderDetailsDialogVisible: false
      }
    },

    computed:{
      ...mapState({
        imageServer:state=>state.prod.imageServer
      })
    },

    created() {
      this.getPageFunction();
    },
    methods: {

      //打开修改对话框
      handleModifyButtonClick(row) {
        // TODO 先去请求原始数据，然后显示对话框
      },

      // 确认修改
      handleConfirmModifyButtonClick() {
        this.modifyDialogVisible = false;
        //TODO 发起修改请求
      },

      // 删除
      async handleDeleteButtonClick(id) {

        const res = await this.$confirm('确定要删除?', "提示");
        if (res == 'confirm') {
          // TODO 发起删除请求
          this.api.__api__OrdersDelete(id)
            .then(data=>{
              this.getPageFunction();
            }).catch(error=>null)
        } else {
          this.$message.info("已取消删除");
        }
      },

      //确认添加
      handleConfirmAddButtonClick() {
        //TODO 发起添加请求
      },

      //点击搜索
      handleSearchButtonClick() {
        this.getPageFunction();
      },

      //页大小改变
      handlePageSizeChange(size) {
        this.pageInfo.pageSize = size;
        this.pageReqParams.pageSize = size;
        this.getPageFunction();
      },

      //页码改变
      handleCurrentPageNumberChange(pageNum) {
        this.pageReqParams.pageNum = pageNum;
        this.getPageFunction();
      },

      //获取一页数据
      getPageFunction() {
        //TODO 发起分页请求
        this.api.__api__OrdersPage(this.pageReqParams)
          .then(data=>{
            this.pageInfo = data.data;
          }).catch(error=>null);

      },

      //弹出添加对话框
      handleAddButtonClick() {
        this.addDialogVisible = true;
      },

      //取消添加
      handleCancelAddButtonClick() {
        this.addDialogVisible = false;
      },

      //取消修改
      handleCancelModifyButtonClick() {
        this.modifyDialogVisible = false;
      },

      handleOrderDetail(id){
        this.api.__api__OrdersDetail(id)
          .then(data=>{
              //console.log("订单详情:"+JSON.stringify(data.data))
              this.orderDetails = data.data;
              this.orderDetailsDialogVisible = true;
          }).catch(error=>null)
      }
    }

  }
</script>

<style scoped lang="less">

  .el-pagination {
    margin: 5px;
  }

  #search-bar{

    .el-col {
      margin-bottom: 10px;
    }
  }



</style>
